<template>
  <div class="app-container">


    <div class="filter-container">
      <el-button class="filter-item" icon="el-icon-circle-plus-outline" @click="showDialogVisible(null)">新增</el-button>
    </div>

    <el-table
      :data="tableInfo.data"
      border
      style="width:100%"
      class="init_table">

      <el-table-column
        align="center"
        width="50"
        type="index"
        label="序号">
      </el-table-column>

      <el-table-column
        align="center"
        prop="name"
        label="名称"
        :min-width="tableInfo.minWidth">
      </el-table-column>
      <el-table-column
        align="center"
        prop="code"
        label="编码"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        prop="remark"
        label="备注"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        label="状态"
        :min-width="tableInfo.minWidth">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.active==0" type="danger">停用</el-tag>
          <el-tag v-else type="success">启用</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showDialogVisible(scope.row)">编辑</el-button>
          <el-button type="text" @click="showDialogVisibleResource(scope.row.id)">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="角色" :visible.sync="dialogVisible" width="40%" top="10vh">
      <el-form ref="submitForm" :rules="rules" :model="submit" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="名称：" prop="name">
              <el-input v-model="submitData.name"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="编码：" prop="code">
              <el-input v-model="submitData.code"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="submitData.remark"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="状　态：" prop="active">
              <el-radio-group v-model="submitData.active">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-if="operateType=='add'" type="primary" @click="handleAddData">确定</el-button>
        <el-button v-else type="primary" @click="handleModifyData">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="分配权限" :visible.sync="dialogVisibleResource" width="40%" top="10vh">
      <el-tree
        ref="tree"
        :data="resourceTreeData"
        :props="treeProps"
        :default-checked-keys="checkedKeys"
        show-checkbox
        class="filter-tree"
        node-key="id"
        default-expand-all
        highlight-current
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleResource = false">取消</el-button>
        <el-button type="primary" @click="handleAddRoleResourceData">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {listAllRole,addResourceForRole, modifyRole, addRole} from '@/api/role'
  import {listResourceByActive, listResourceByRoleId} from '@/api/resource'

  import {handleRequest, toTree} from '@/utils/system'

  export default {
    data: () => ({
      dialogVisible: false,
      dialogVisibleResource: false,
      operateType: null,
      submitData: {
        id: null,
        name: null,
        code: null,
        remark: null,
        active: null
      },
      rules: {
        name: [{required: true, message: '不能为空', trigger: 'change'}],
        code: [{required: true, message: '不能为空', trigger: 'change'}],
        active: [{required: true, message: '不能为空', trigger: 'change'}],
      },
      tableInfo:{
        data:null,
        minWidth: 50,
      },
      resourceTreeData: [],
      checkedKeys: [],
      selectRoleId:null,
      treeProps:{
        label: 'name'
      }
    }),
    mounted() {
      this.refreshTable();
    },
    methods: {
      resetSubmitData() {
        this.submitData = {
          id: null,
          name: null,
          code: null,
          remark: null,
          active: null
        }
      },
      showDialogVisible(row) {
        this.resetSubmitData()
        this.operateType = 'add'
        this.dialogVisible = true

        if (row) {
          this.submitData = {...row}
          this.operateType = 'modify'
        }
        this.$nextTick(() => {
          this.$refs['submitForm'].clearValidate()
        })
      },
      showDialogVisibleResource(roleId) {

        this.resourceTreeData=[]
        this.checkedKeys= []
        this.selectRoleId=roleId
        this.dialogVisibleResource = true

        handleRequest({
          method: listResourceByActive,
          data:{active:1},
          successCall: (data) => {
            this.resourceTreeData = toTree(data);
          }
        })

        handleRequest({
          method: listResourceByRoleId,
          data: {roleId: this.selectRoleId},
          successCall: (data) => {
            this.checkedKeys = data.map(item => item.id);
          }
        })
      },
      handleAddData() {
        this.$refs['submitForm'].validate((valid) => {
          if (valid) {
            handleRequest({
              method: addRole,
              data: this.submitData,
              operateType: "新增",
              warnAlertShow: true,
              successAlertShow: true,
              failAlertShow: true,
              successCall: () => {
                this.dialogVisible = false;
                this.refreshTable();
              }
            })
          }
        })
      },

      handleModifyData() {
        this.$refs['submitForm'].validate((valid) => {
          if (valid) {
            handleRequest({
              method: modifyRole,
              data: this.submitData,
              operateType: "修改",
              warnAlertShow: true,
              successAlertShow: true,
              failAlertShow: true,
              successCall: () => {
                this.dialogVisible = false;
                this.refreshTable();
              }
            })
          }
        })
      },
      handleAddRoleResourceData(){
        handleRequest({
          method: addResourceForRole,
          data: {
            roleId:this.selectRoleId,
            resourceIdList:this.$refs.tree.getCheckedKeys(true)
          },
          operateType: "修改",
          warnAlertShow: true,
          successAlertShow: true,
          failAlertShow: true,
          successCall: () => {
            this.dialogVisibleResource = false;
          }
        })
      },
      refreshTable() {
        handleRequest({
          method: listAllRole,
          successCall: (data) => {
            this.tableInfo.data = data;
          }
        })
      },

    }
  }


</script>

<style>
  .init_table {
    /*width: 66% !important;*/
    /*max-width: 900px !important;*/
    /*margin: 0 auto !important;*/
  }

  .init_table th {
    background-color: #edf6ff;
    text-align: center !important;
    color: #066cd4;
    font-weight: bold;
  }

  .init_table th .cell {
    padding: 0 !important;
  }

  .init_table td,
  .init_table th {
    padding: 0 !important;
    height: 40px !important;
  }


</style>
